<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    自定义事件内容分发，（说白了就是想办法让组件控制Vue实例）
    标签内写
    v-on:remove="removeItem(index)"
    v-on:组件方法名="Vue实例方法区的方法"
    定义组件方法，定义自定义事件，绑定Vue实例方法
  -->
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-li slot="todo-li" v-for="(item,index) in todoItems" v-bind:item="item" v-bind:index="index" v-on:remove1="removeItem(index)"></todo-li>
    </todo>
</div>

<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>

    Vue.component("todo",{
        template: "<div>\n" +
        "        <slot name='todo-title'></slot>\n" +
        "        <ul>\n" +
        "            <slot name='todo-li'></slot>\n" +
        "        </ul>\n" +
        "    </div>"
    })

    //标题
    Vue.component("todo-title",{
        props:['title'],
        template: "<p>{{title}}</p>"
    })

    //列表，数据
    Vue.component("todo-li",{
        props:['item','index'],
        template: "<li>{{item}}--<button v-on:click='remove'>删除</button></li>",
        methods:{
            remove: function (index) {
                //绑定标签里的自定义事件 v-on:remove="removeItem(index)
                this.$emit("remove1",index)
            }
        }
    })


    var vm = new Vue({
        el: "#app",
        data:{
            title: "狂神说",
            todoItems: ["MyBatis","Spring","SpringMvc"]
        },
        methods: {
            removeItem: function (index) {
                //删除当前下标得元素
                this.todoItems.splice(index,1);
            }
        }
    })
</script>
</body>
</html>